<!--
 * @Description: 
 * @Author: chenjiaxin
 * @Date: 2023-12-06 16:48:24
 * @LastEditTime: 2023-12-26 13:47:44
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>岸(àn) - 笔顺动画</title>
  <script src="scripts/animate.min.js"></script>
</head>
<body>
  <div id="viewer"></div>
  <script>
    const data = {
      type: "chinese",
      width: "3.98rem",
      minWidth: "120",
      maxWidth: "398",
      volume: 50, // 音量调节，数值为 0 - 100
      pages: [
        {
          "character": "岸",
          "strokes": ["M 552 676 Q 562 730 571 779 Q 575 795 582 812 Q 586 822 569 835 Q 541 853 520 857 Q 507 861 500 854 Q 493 848 499 835 Q 514 816 515 670 C 515 640 547 647 552 676 Z","M 689 692 Q 632 692 552 676 L 515 670 Q 428 661 390 645 Q 384 642 381 645 Q 380 648 390 703 Q 391 742 345 763 Q 341 766 336 766 Q 323 769 319 765 Q 315 759 325 739 Q 350 682 313 624 Q 310 620 306 616 Q 294 607 296 599 Q 299 592 314 578 Q 327 566 335 566 Q 341 566 346 571 Q 364 610 683 660 Q 684 660 689 660 C 719 663 719 693 689 692 Z","M 689 660 Q 690 641 697 626 Q 704 610 717 619 Q 744 640 757 721 Q 778 763 782 768 Q 792 781 784 796 Q 768 812 738 835 Q 726 844 714 839 Q 707 836 707 823 Q 714 816 715 762 Q 703 728 689 692 L 689 660 Z","M 361 492 Q 412 485 429 485 Q 432 486 690 529 Q 748 541 758 549 Q 767 556 762 564 Q 756 576 728 584 Q 703 590 606 563 Q 471 532 355 523 Q 351 523 350 522 C 320 518 331 496 361 492 Z","M 350 522 Q 338 535 320 546 Q 302 559 289 556 Q 276 550 281 536 Q 314 475 225 246 Q 218 231 210 215 Q 168 134 94 49 Q 88 43 86 38 Q 82 28 92 28 Q 122 28 202 120 Q 214 136 228 155 Q 288 248 341 438 Q 342 454 356 482 Q 360 486 361 492 C 368 506 368 506 350 522 Z","M 595 396 Q 733 424 734 425 Q 743 432 738 440 Q 732 452 704 460 Q 683 466 562 436 Q 493 424 427 419 Q 391 415 416 398 Q 452 371 534 387 L 536 387 L 595 396 Z","M 533 288 Q 430 275 309 259 Q 287 258 303 239 Q 318 224 336 219 Q 358 213 375 218 Q 448 237 531 245 L 592 252 Q 656 258 833 258 Q 854 258 859 267 Q 865 279 848 293 Q 793 335 728 320 Q 671 310 593 296 L 533 288 Z","M 536 387 Q 535 338 533 288 L 531 245 Q 522 -23 547 -50 Q 559 -63 570 -36 Q 591 0 591 183 Q 591 217 592 252 L 593 296 Q 593 345 595 396 C 596 426 537 417 536 387 Z"],
          "medians": [[[510,844],[528,830],[543,806],[535,694],[519,683]],[[324,760],[345,743],[361,715],[363,695],[352,634],[353,622],[361,620],[597,666],[667,672],[683,687]],[[721,826],[749,781],[719,687],[709,628]],[[354,515],[374,507],[432,508],[682,555],[749,559]],[[294,543],[312,522],[324,494],[299,382],[267,288],[229,201],[190,138],[126,62],[94,36]],[[418,410],[448,402],[487,402],[688,438],[730,434]],[[306,249],[357,240],[543,269],[754,291],[790,289],[847,273]],[[589,389],[565,361],[564,351],[556,-41]]],
          "pinyin": ["àn"],
          "spell": "data/spell.mp3",
          "whole": "data/whole.mp3"
        }
      ]
    };
    
    let stroke = new animate(data);
    stroke.renderTo("viewer").display();
  </script>

</body>
</html>